<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="医生编号:">
            <span>{{doctor.id}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="医生姓名:">
           <span>{{doctor.name}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="头像">
           <img src="" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="医生电话:">
            <span></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-form-item label="性别">
          <template slot-scope="scope">
            <span v-if="doctor.sex=='0'">女</span>
            <span v-else>男</span>
          </template>
        </el-form-item>
      </el-row>
      <el-form-item label="医生简介">
        <el-input v-model="doctor.description" :rows="4" type="textarea"/>
      </el-form-item>
      <el-form-item label="加入团队">
        <el-input v-model="doctor.skill" :rows="4" type="textarea"/>
      </el-form-item>
      <el-form-item label="签约人数">
        <span>{{doctor.colectNum}}</span>
      </el-form-item>
      <el-form-item label="创建时间">
        <span>{{doctor.createTime}}</span>
      </el-form-item>
      <el-form-item label="创建人">
        <span>李明</span>
      </el-form-item>
      <el-form-item label="状态">
        <template slot-scope="scope">
          <span v-if="doctor.sex=='0'">签约</span>
          <span v-else>未签约</span>
        </template>
      </el-form-item>
      <el-row >
        <el-col :span="3">
          <el-form-item>
            <template slot-scope="scope">
                <el-button type="primary" @click="handleEdit">编辑医生</el-button>
            </template>

          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
              <el-button type="primary" @click="handleRemove">删除</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <router-link to="/doctor">
              <el-button type="primary">返回</el-button>
            </router-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import doctor from '../../../api/admin/doctor'
export default {
  data(){
    return{
      doctor:{
        id:''
      },
    }
  },

  created() {
// 判断是修改操作还是新增操作，主要判断的依据是地址栏后面是否有id值
    console.log(this.$route.params);
    const id=this.$route.params.id;
    this.getDoctorDetailByDocctorId(id);
  /*  // 传过来有数据
    if (this.$route.params&&this.$route.params.id){
      //根据id查询
      this.queryById(this.$route.params.id)
    }
    else {
      console.log("2222222")
      this.trainer={avatar:""};
    }*/
  },

  methods:{
     //根据doctorId查询医生的详情信息
    getDoctorDetailByDocctorId(id){
      doctor.queryDetailByDoctorId(id).then(res=>{
        this.doctor=res.data;
      })
    },
    //根据id删除
    handleRemove(){
      this.$confirm("是否确定删除？", "提示", {type: "warning"})
        .then(() => {
          // 点击了确定删除
          doctor.removeById(this.doctor.id).then(res => {
            // 显示提示信息
            this.$message.success(res.message);
            // 跳转会列表
            this.$router.push("/doctor");
          });
        })
        .catch(() => {
          // 点击取消删除
          this.$message.info("取消删除操作");
        });
    },
    //编辑
    handleEdit(){
      this.$router.push(`/doctor/edit/${this.doctor.id}`)
    },

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
